<template>
    <view class="wai">
        <view class="bgi-img">
            <image class="imga" src="@/static/bgi1.png" mode="aspectFit"></image>
            <image @click="goBack" :style="'top:' + navBarTop + 'px;'" class="jure" src="@/static/left.png" mode="aspectFit"></image>
            <view :style="'top:' + (navBarTop + 3) + 'px;'" class="top-h">商家后台</view>
            <image class="toux" :src="backend.shop.logo" mode=""></image>
            <view class="shopname">{{ backend.shop.name }}</view>
<!--            <view class="information">
				<view class="">我的资产</view>
				<view class="">{{backend.income}}元</view>
			</view> -->
            <image class="bgi2" src="@/static/bgi2.png" mode=""></image>
            <view class="flex1">
                <view class="price1">{{ backend.amount_today }}</view>
                <view>今日营业额</view>
            </view>
            <view class="flex1 felx2">
                <view class="price1">{{ backend.amount_yesterday }}</view>
                <view>今日营业额</view>
            </view>
            <view class="yue1" @click="getYue">月数据</view>
        </view>
        <view class="cen">
            <view class="shangjia" @click="shopOrd">
                <image class="shangjia-img" src="@/static/merchant1.png" mode=""></image>
                <view>商家订单</view>
            </view>
            <view class="shangjia s2" @click="shopOrd1">
                <image class="shangjia-img" src="@/static/merchant2.png" mode=""></image>
                <view>商品管理</view>
            </view>
           <view class="shangjia s3" @click="information">
                <image class="shangjia-img" src="@/static/merchant3.png" mode=""></image>
                <view>店铺资料</view>
            </view>
            <view class="shangjia s4" @click="shopOrd3">
                <image class="shangjia-img" src="@/static/merchant4.png" mode=""></image>
                <view>商家提现</view>
            </view>
			<view class="shangjia s4" @click="shopOrd4">
			    <image class="shangjia-img" src="@/static/merchant4.png" mode=""></image>
			    <view>收款码</view>
			</view>
        </view>
        <view class="bottom">
			<view class="ma">
				 <view class="title">今日店铺积分</view>
				 <view class="text">{{backend.today_score}}</view>
			</view>
           <view class="ma">
				 <view class="title">累计积分</view>
				 <view class="text ta">{{backend.total_score}}</view>
			 </view>
		</view>
		<view class="bottom2">
			<view class="ma">
				 <view class="title">可用抵用券</view>
				 <view class="text">{{shop.voucher}}</view>
			</view>
		   <view class="ma">
				 <view class="title">累计抵用券</view>
				 <view class="text ta">{{backend.total_voucher}}</view>
			 </view>
		</view>
		<view class="bottom3">
			<view class="ma">
				 <view class="title">可提现余额</view>
				 <view class="text">{{shop.money}}元</view>
			</view>
		</view>
    </view>
</template>

<script setup>
import { utils } from '@/utils/utils.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getshopbk,shopqrcode } from '@/api/index.js';
const backend = ref({}); //商铺后台数据
const navBarTop = ref(); //高度
const qrcode = ref("")
const token = ref(uni.getStorageSync('token'))
const shop = ref({})
onLoad(() => {
    getBackend();
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    navBarTop.value = menuButtonInfo.top;
	getShopqrcode()
});
// 获取商铺后台
const getBackend = async () => {
    const ret = await getshopbk();
    console.log(ret);
    if (ret.code == 1) {
        backend.value = ret.data;
		shop.value = ret.data.shop
        console.log(888, backend.value);
    } else {
        utils();
    }
};
const getShopqrcode = async()=>{
	// const ret = await shopqrcode();
	// let r = ret.blob()
	// r = URL.createObjectURL(blob)
	// qrcode.value = r
}
// 点击跳转商家提现
const shopOrd4 = () => {
    uni.navigateTo({
        url: '/pages/sub/shangjiaQR?code='+shop.value.id
    });
}; // 点击跳转积分明细
// 点击跳转商家提现
const shopOrd3 = () => {
    uni.navigateTo({
        url: '/pages/sub/cash'
    });
}; // 点击跳转积分明细
const shopOrd2 = () => {
    uni.navigateTo({
        url: '/pages/sub/points'
    });
}; // 点击跳转商品管理
const shopOrd1 = () => {
    uni.navigateTo({
        url: '/pages/sub/shopguanli'
    });
};
// 点击跳转商家订单
const shopOrd = () => {
    uni.navigateTo({
        url: '/pages/sub/shopOrders'
    });
};
// 点击跳转月数据
const getYue = () => {
    uni.navigateTo({
        url: '/pages/sub/yuedata'
    });
};
// 点击跳转店铺资料
const information = () => {
    uni.navigateTo({
        url: '/pages/sub/information1'
    });
};
const goBack = () => {
    uni.switchTab({
        url: '/pages/my/my'
    });
};
</script>

<style lang="scss" scoped>
.wai {
	.bottom3 {
		display: flex;
	  
	    position: absolute;
	    left: 32rpx;
	    top: 1300rpx;
	    width: 686rpx;
	    height: 200rpx;
	    background: #ffffff;
	    border-radius: 20rpx;
	    text-align: center;
		.ma {
		    width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				height: 45%;
				display: flex;
				align-items: center;
			}
			.text{
				height: 55%;
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 44rpx;
				width: 100%;
				text-align: center;
				justify-content: center;
			}
			.ta{
				border-left: 1rpx solid #ccc;
			}
		}
	}
    // 底部收款码、
	.bottom2 {
		display: flex;
	  
	    position: absolute;
	    left: 32rpx;
	    top: 1050rpx;
	    width: 686rpx;
	    height: 200rpx;
	    background: #ffffff;
	    border-radius: 20rpx;
	    text-align: center;
		.ma {
		    width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				height: 45%;
				display: flex;
				align-items: center;
			}
			.text{
				height: 55%;
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 44rpx;
				width: 100%;
				text-align: center;
				justify-content: center;
			}
			.ta{
				border-left: 1rpx solid #ccc;
			}
		}
	}
    .bottom {
		display: flex;
      
        position: absolute;
        left: 32rpx;
        top: 810rpx;
        width: 686rpx;
        height: 200rpx;
        background: #ffffff;
        border-radius: 20rpx;
        text-align: center;
		.ma {
		    width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title{
				height: 45%;
				display: flex;
				align-items: center;
			}
			.text{
				height: 55%;
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 44rpx;
				width: 100%;
				text-align: center;
				justify-content: center;
			}
			.ta{
				border-left: 1rpx solid #ccc;
			}
		}
    }
    // 商家信息
    .cen {
        .shangjia {
            .shangjia-img {
                width: 70rpx;
                height: 72rpx;
                margin-bottom: 10rpx;
            }
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 24rpx;
        }
		display: flex;
		flex-wrap: wrap;
        position: relative;
		justify-content: space-around;
		align-items: center;
        left: 32rpx;
        bottom: -144rpx;
        width: 686rpx;
        height: 194rpx;
        background: #ffffff;
        border-radius: 20rpx;
    }
    .bgi-img {
        position: relative;
        .yue1 {
            position: absolute;
            color: #fff;
            border-radius: 30rpx;
            right: 54rpx;
            bottom: 28rpx;
            font-size: 24rpx;
            background: #ff9b29;
            padding: 4rpx 14rpx 2rpx;
        }
        .flex1 {
            .price1 {
                color: #333333;
                font-size: 48rpx;
                font-weight: 700;
                margin-bottom: 22rpx;
            }
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            left: 82rpx;
            bottom: -82rpx;
            color: #999999;
            font-size: 28rpx;
        }
        .felx2 {
            left: 378rpx;
        }
        .bgi2 {
            position: absolute;
            left: 32rpx;
            bottom: -122rpx;
            width: 686rpx;
            height: 212rpx;
        }
        // 店铺资料
        .information {
            position: absolute;
            right: 24rpx;
            bottom: 146rpx;
            // font-size: 24rpx;
            color: #ffffff;
            padding: 12rpx 20rpx 8rpx 18rpx;
            // border: 2rpx solid #ffffff;
            // border-radius: 50rpx;
        }
        .shopname {
            position: absolute;
            left: 190rpx;
            bottom: 154rpx;
            font-size: 36rpx;
            color: #fff;
        }
        .toux {
            width: 108rpx;
            height: 108rpx;
            border-radius: 50%;
            position: absolute;
            left: 50rpx;
            bottom: 126rpx;
        }
        .top-h {
            position: absolute;
            left: 300rpx;
            color: #fff;
        }
        .jure {
            position: absolute;
            left: 24rpx;
            width: 44rpx;
            height: 60rpx;
        }
        .imga {
            height: 442rpx;
            width: 100vw;
        }
    }
    height: 100vh;
    background-color: #f7f7f7;
}
</style>
